// Tour Guiada IntroJS 

// JSON Dashboard

function startIntroTemp(){
  var tour = introJs();
    tour.setOptions({
      steps: [
        {
          intro: '<h4 class="nopadding">Dashboard</h4>Olá! Conheça os recursos do seu Dashboard do SMMB. <br/> <br/> <span class="glyphicon glyphicon-arrow-left"></span> pressione <span class="glyphicon glyphicon-arrow-right"></span> para navegar.<br/> <br/> Caso deseje finalizar a navegação, clique em  <span class="label label-success">Já entendi!</span>'
        },
        {
          element: document.querySelector('.glyphicon-filter'),
          intro: '<h4 class="nopadding">Filtro dinâmico</h4>Para entender melhor os filtros do painel, acesse o passo a passo referente aos filtros.',
          position: 'left'
        },
        {
          element: document.querySelectorAll('.ajuda-gat')[0],
          intro: 'Em qualquer momemnto você poderá optar por acionar os botões de ajuda do sistema.',
          position: 'right'
        }
      ]
    });
  

tour.setOptions({'skipLabel':'Já Entendi!','nextLabel':'Continuar','prevLabel':'Voltar','doneLabel':'Concluir', 'exitOnEsc':'false','showProgress':'false'})

    tour.start();
}

// JSON Dashboard

function startIntro(){
  var tour = introJs();
    tour.setOptions({
      steps: [
        {
          intro: '<h4 class="nopadding">Dashboard</h4>Olá! Conheça os recursos do seu Dashboard do SMMB. <br/> <br/> <span class="glyphicon glyphicon-arrow-left"></span> pressione <span class="glyphicon glyphicon-arrow-right"></span> para navegar.<br/> <br/> Caso deseje finalizar a navegação, clique em  <span class="label label-success">Já entendi!</span>'
        },
        {
          element: document.querySelectorAll('.tabAndamento')[0],
          intro: 'Ao clicar na aba "Em Andamento", o sistema retorna todas as solicitações que ainda estão abertas.',
          position: 'bottom'
        },
        {
          element: document.querySelectorAll('.tabFinalizada')[0],
          intro: 'Já clicando na aba “Finalizadas”, é possível filtrar as solicitações concluídas ou canceladas. ',
          position: 'bottom'
        },
        {
          element: document.querySelectorAll('#filtroAgenteAndamento')[0],
          intro: 'É possível filtrar as solicitações por tipo de envolvimento: "Proprietário", "Concessionário" e "Envolvido".',
          position: 'right'
        },
        {
          element: document.querySelector('#emAndFiltroStatus'),
          intro: 'No painel, é possível visualizar todas as etapas do processo de modelagem.',
          position: 'bottom'
        },
        {
          element: document.querySelectorAll('#bt01')[0],
          intro: '<h4 class="nopadding">Status</h4>O sistema já carrega todas as etapas automaticamente, porém, para ajustar o filtro, basta clicar no status não desejado para removê-lo.',
          position: 'top'
        },
        {
          element: document.querySelectorAll('.invert')[0],
          intro: 'Para cada opção de filtro, o sistema informa quantas solicitações existem no status em questão.',
          position: 'bottom'
        },
        {
          element: document.querySelectorAll('.btn-select-all')[0],
          intro: 'O botão <strong>"Selecionar todos"</strong> pressionado mantém todas as solicitações do agente na lista.',
          position: 'bottom'
        },
        {
          element: document.querySelectorAll('.btn-clear-selection')[0],
          intro: 'Se preferir, utilize a opção de <strong>"Limpar seleção"</strong> para que você escolha os parâmetros desejados. ',
          position: 'bottom'
        },
        {
          element: document.querySelectorAll('.tipoData')[0],
          intro: 'Ainda há mais uma opção de filtro, <strong>“Selecione o tipo de data”</strong>, a qual temos as seguintes opções, <strong>“Apta para”</strong>, <strong>“Solicitada para”</strong> e <strong>“Autorizada para”</strong>. Ao selecionar uma das opções, o sistema retornará as informações pertinentes',
          position: 'bottom'
        },
        {
          element: document.querySelectorAll('.dataPick')[0],
          intro: 'Ao clicar no filtro escolha o período, selecione no calendário o período desejado, <strong>“De”</strong> - <strong>“Até”</strong>, e em seguida clique em <strong>“Ok”</strong>. Caso não deseje mais usar o filtro, clique em “Cancelar”. <br><br>	<img src="/soma/help/img/calendario-home.png" width="100%">',
          position: 'left'
        },
        {
          element: document.querySelectorAll('.status')[0],
          intro: 'Acompanhe o status da solicitação pelo dashboard.',
          position: 'top'
        },
        {
          element: document.querySelectorAll('.indicador')[0],
          intro: 'A coluna de indicadores sinaliza as pendências existentes no processo.',
          position: 'left'
        },
        {
          element: document.querySelectorAll('.DTTT_button_xls')[0],
          intro: 'Por fim, é possível exportar a lista para um arquivo. Para esta ação utilize este botão.',
          position: 'top'
        },
        {
          element: '#step4',
          intro: "Ficou com alguma dúvida? <br/><br/>No rodapé temos a nossa Ajuda On-line.",
          position: 'bottom'
        }
      ]
    });
  

tour.setOptions({'skipLabel':'Já entendi!','nextLabel':'Continuar','prevLabel':'Voltar','doneLabel':'Finalizar ajuda', 'exitOnEsc':'false','showProgress':'false'})

    tour.start();
}

// JSON Tela de Cadastro utilizando exemplos com ID, CLASSES, querySelector('.class-name'),  querySelectorAll('#id-name')[0]

function startIntroCad(){
  var tour = introJs();
    tour.setOptions({
      steps: [
        {
	      element: '#sma_status', 
          intro: 'Painel informativo da Solicitação.',
          position: 'bottom'
        },
        {
          element: document.querySelector('.sidebar-offcanvas'),
          intro: "<h4 class='nopadding'>Organização da solicitação</h4>Menu de navegação para preenchimento da Solicitação.",
          position: 'right'
        },
        {
          element: document.querySelector('.btn-verifica'),
          intro: "<h4 class='nopadding'>Verificar inconsistências</h4>Botão de auxílio que verifica as inconsistências encontradas na Solicitação antes de encaminhá-la.",
          position: 'top'
        },
        {
          element: document.querySelectorAll('.active')[0],
          intro: "<h4 class='nopadding'>Sinalização</h4>Todas as inconsistências serão apresentadas com este ícone &nbsp;<span class='glyphicon glyphicon-warning-sign bg-icon warning-yellow'></span>&nbsp; no menu da Solicitação.",
          position: 'right'
        },
        {
          element: document.querySelectorAll('.control-label')[0],
          intro: "<h4 class='nopadding'>Dicas</h4>Passe o mouse sobre os labels para ver dicas de preenchimento.",
          position: 'bottom'
        },
        {
          element: document.querySelectorAll('#botaoAcoes')[0],
          intro: "<h4 class='nopadding'>Conclusão do preenchimento</h4>Ao finalizar o preenchimento da solicitação, utilize o menu 'Ações' para Gravá-la ou Encaminhá-la para a próxima etapa. <br/> <br/>Através deste menu você também pode <strong>Cancelar uma solicitação Em Preenchimento</strong> ou voltar ao Dashboard.",
          position: 'left'
        }
      ]
    });
      
tour.setOptions({'skipLabel':'Já entendi!','nextLabel':'Continuar','prevLabel':'Voltar','doneLabel':'Finalizar ajuda', 'exitOnEsc':'false','showProgress':'true'})

    tour.start();
}


function startIntroView(){
  var tour = introJs();
    tour.setOptions({
      steps: [
	     {
          intro: '<h4 class="nopadding">Precisando de ajuda?</h4>Bem-vindo ao dashboard do SMMB. <br/><br/>Clique em <span class="label label-default">Continuar</span> para navegar através das funcionalidades do painel.',
          position: 'bottom'
        },
        {
          element: document.querySelector('.glyphicon-user'),
          intro: "<h4 class='nopadding'>Usuário</h4>Aqui você pode verificar o usuário que está logado no sistema.",
          position: 'bottom'
        },
        {
          element: document.querySelector('.ui-autocomplete-input'),
          intro: "Neste campo, é possível selecionar o agente.",
          position: 'bottom-left-aligned'
        },
        {
	      element: '.page-header', 
          intro: '<h4 class="nopadding">Dashboard</h4>No dashboard é possível visualizar todas as Solicitações de Modelagem que o Agente está envolvido. ',
          position: 'bottom'
        },
        {
	      element: '#ajudaTab', 
          intro: '<h4 class="nopadding">Entenda as etapas</h4>Caso queira entender alguma etapa do processo, clique na etapa desejada para obter mais detalhes.',
          position: 'top'
        },
        {
	      element: '.ajuda-rodape', 
          intro: '<h4 class="nopadding">Ajuda on-line</h4>No rodapé está disponível um guia com as principais operações do sistema.',
          position: 'top'
        },
        {
	      element: '.header', 
          intro: '<h4 class="nopadding">Voltar ao dashboard</h4> Caso queira voltar ao dashboard a partir de qualquer tela, clique no logo do SMMB.',
          position: 'bottom'
        }
      ]
    });
      
tour.setOptions({'skipLabel':'Já entendi!','nextLabel':'Continuar','prevLabel':'Voltar','doneLabel':'Finalizar ajuda', 'exitOnEsc':'false','showProgress':'true'})

    tour.start();
}

/*Pontos de Medição*/

function startIntroPontos(){
  var tour = introJs();
    tour.setOptions({
      steps: [
        {
          element: document.querySelector('#painelPontosMedicaoBusca'),
          intro: "<h4 class='nopadding'>Incluir Pontos de Medição</h4>A inclusão dos pontos de medição na sua solicitação é feita através deste painel. <br><br>Para isso é necessário realizar uma consulta.",
          position: 'bottom'
        },
        {
          element: document.querySelector('#pesquisarPontosMedicaoPesquisar'),
          intro: "Para efetuar uma inclusão de Ponto de Medição é necessário fazer uma pesquisa com os campos disponíveis.",
          position: 'bottom-left-aligned'
        },
        {
	      element: '#tipoPesquisaPontoMedicao', 
          intro: '<h4 class="nopadding">Parecer de Localização</h4>Uma das opções de consulta é o Parecer de Localização. ',
          position: 'top'
        },
        {
	      element: '#pmFieldSearch', 
          intro: '<h4 class="nopadding">Número do Parecer de Localização</h4>Para uma pesquisa específica procure pelo número do parecer de localização.',
          position: 'bottom'
        },
        {
	      element: '#inputAno', 
          intro: '<h4 class="nopadding">Ano</h4>O filtro pode ser parametrizado por ano.',
          position: 'left'
        },
        {
	      element: '#buscaPontosMedicao', 
          intro: 'Definidos os parâmetros clique em <strong>"Pesquisar"</strong>. Selecione os Pontos desejados e clique no botão <button type="button" class="btn btn-success btn-incluir btn-xs"><span class="glyphicon glyphicon-plus"></span> Incluir</button>',
          position: 'right'
        }
      ]
    });
      
tour.setOptions({'skipLabel':'Já entendi!','nextLabel':'Continuar','prevLabel':'Voltar','doneLabel':'Finalizar ajuda', 'exitOnEsc':'false','showProgress':'true'})

    tour.start();
}

/*Unidade Geradora*/

function startIntroUg(){
  var tour = introJs();
    tour.setOptions({
      steps: [
        {
          element: document.querySelector('.panel-sma'),
          intro: "<h4 class='nopadding'>Incluir Unidades Geradoras</h4>Para incluir uma nova unidade geradora, o preenchimento deve ser realizado nessa seção.",
          position: 'left'
        },
        {
	      element: '#replicarUg', 
          intro: '<h4 class="nopadding">Replicar</h4>No momento da inclusão, a unidade geradora que está sendo cadastrada pode ser utilizada como referência para replica.',
          position: 'top'
        },
        {
	      element: '.btn-incluir-unidade', 
          intro: '<h4 class="nopadding">Conclusão</h4>Com todas as informações preenchidas, deve ser selecionado o botão <button type="button" class="btn btn-success btn-incluir-unidade btn-xs"><span class="glyphicon glyphicon-plus"></span> Incluir Unidade Geradora</button>',
          position: 'top'
        }
      ]
    });
      
tour.setOptions({'skipLabel':'Já entendi!','nextLabel':'Continuar','prevLabel':'Voltar','doneLabel':'Finalizar ajuda', 'exitOnEsc':'false','showProgress':'true'})

    tour.start();
}